<template>
<div id="secHandPub">
        <!--后退-->
        <img class="back"src="../../assets/task/back.png" alt="" onclick="history.go(-1)">
        <mt-navbar v-model="selected">
            <mt-tab-item id="1"><img src="../../assets/tabber/sell.png" alt="">我要甩卖</mt-tab-item>
            <mt-tab-item id="2"><img src="../../assets/tabber/unbuy.png" alt="">我要收买</mt-tab-item>
        </mt-navbar> 
        <mt-tab-container v-model="selected">
            <mt-tab-container-item id="1">
                <div class="sell">
                    <section>
                          <img src="../../assets/tabber/idCard.png" alt="">
                          <input v-model="secHandData1.taskName" type="text" placeholder="请输入商品名称">  
                    </section>
                    <section>
                          <img src="../../assets/tabber/money.png" alt="">
                          <input onkeyup="(this.v=function(){this.value=this.value.replace(/[^0-9-]+/,'');}).call(this)" onblur="this.v();" v-model="secHandData1.amount" type="text" placeholder="请输入商品金额">   
                    </section>
                   <section>
                          <img style="height:1.6rem;width:1.8rem;margin-right:0.75rem;margin-top:-9rem;"
                                    src="../../assets/tabber/book.png" alt="">
                          <textarea v-model="secHandData1.taskExplain" placeholder="请输入商品描述" maxlength="39"></textarea>  
                    </section>
                </div>
                <router-link to="/businessComfig" style="text-decoration:none;">
                    <div class="sellNext" @click="addSecHandTask">确定</div></router-link>   
            </mt-tab-container-item>
            <mt-tab-container-item id="2">
                <div class="buy">
                    <section>
                          <img src="../../assets/tabber/idCard.png" alt="">
                          <input v-model="secHandData2.taskName" type="text" placeholder="请输入商品名称">  
                    </section>
                    <section>
                          <img src="../../assets/tabber/money.png" alt="">
                          <input onkeyup="(this.v=function(){this.value=this.value.replace(/[^0-9-]+/,'');}).call(this)" onblur="this.v();" v-model="secHandData2.amount" type="text" placeholder="请输入商品金额">   
                    </section>
                   <section>
                          <img style="height:1.6rem;width:1.8rem;margin-right:0.75rem;margin-top:-9rem;"
                                    src="../../assets/tabber/book.png" alt="">
                          <textarea v-model="secHandData2.taskExplain" placeholder="请输入商品描述"  maxlength="138"></textarea>  
                    </section>
                    <form action="#">
                        <div id="imgList">
                            <div class="item">
                                <el-upload
                                    class="avatar-uploader"
                                    action="http://haixia.yaowk.xin/file"
                                    :before-upload="beforeAvatarUpload"
                                    :show-file-list="false"
                                    :on-success="handleAvatarSuccess">
                                    <img v-if="secHandData2.common1" :src="secHandData2.common1" class="avatar">
                                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                </el-upload>
                            </div>
                            <div class="item">
                                <el-upload
                                    class="avatar-uploader"
                                    action="http://haixia.yaowk.xin/file"
                                    :show-file-list="false"
                                    :on-success="handleAvatarSuccessTwo">
                                    <img v-if="secHandData2.common2" :src="secHandData2.common2" class="avatar">
                                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                               </el-upload>
                            </div>
                        </div>
                    </form>
                </div>
                <router-link to="/businessComfig" style="text-decoration:none;">
                <div class="buyNext" @click="addSecHandTaskTwo">确定</div></router-link>   
            </mt-tab-container-item>
        </mt-tab-container> 
</div>
</template>
<script>
import $ from 'jquery'
export default {
  data () {
    return {
        // 甩卖
      secHandData1:{
           amount:undefined,
           taskName:undefined,
           taskExplain:undefined,
           taskType:'7',
           allSum:'1',
      },
    //   收买
     secHandData2:{
           amount:undefined,
           taskName:undefined,
           taskExplain:undefined,
           common1:undefined,
           common2:undefined,
           taskType:'6',
           allSum:'1',
      },
      selected:"1",
    }
  },
  created(){
  },
  methods:{
       beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
      addSecHandTask(){
              this.$router.push({
                path: '/businessComfig',
                name: 'businessComfig', 
                params: {
                    name: 'businessComfig',
                    data:this.secHandData1,
                }
          })
      },
       addSecHandTaskTwo(){
        this.$router.push({
            path: '/businessComfig',
            name: 'businessComfig', 
            params: {
                name: 'businessComfig',
                data:this.secHandData2,
            }
        })
      },
       handleAvatarSuccess(res, file) {
        this.secHandData2.common1 = res.data.file;
      },
      handleAvatarSuccessTwo(res, file) {
          console.log( res.data.file)
        this.secHandData2.common2 = res.data.file;
      },
  }
}
</script>
<style>
#secHandPub .avatar-uploader{
    width:100%;
    height:100%;
}
#secHandPub  .avatar-uploader .el-upload{
     width:100%;
    height:100%;
}
#secHandPub .avatar-uploader-icon{
    width:100%!important;
    height:100%!important;
    line-height:4.4rem!important;
    padding-top:0.8rem;
}
#secHandPub  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
#secHandPub .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
#secHandPub .avatar-uploader-icon {
    font-size: 1.4rem;
    color: #8c939d;
    width: 8.9rem;
    height: 8.9rem;
    line-height: 8.9rem;
    text-align: center;
  }
#secHandPub .avatar {
    width: 8.9rem;
    height: 8.9rem;
    display: block;
  }
#secHandPub .mint-navbar {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    text-align: center;
    width:100%;
    height:6rem;
    background-size:100% 100%;
    background-image:url(../../assets/tabber/shtop.png);
    margin:0px auto;
}
#secHandPub .mint-navbar .mint-tab-item {
    background:none;
    padding: 0 0;
    font-size: 1rem;
}
#secHandPub .mint-tab-item {
    background:none;
    display: block;
    padding: 0 0;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    text-decoration: none;
}
#secHandPub .mint-tab-item-label img{
    height:1.2rem;
    width:0.9rem;
    margin-right:0.25rem;
    margin-top:-0.25rem;
}
#secHandPub .mint-tab-item-label {
    color: inherit;
    font-size: 0.8rem;
    height:2rem;
    line-height: 8.5rem;
}
#secHandPub .mint-navbar .mint-tab-item.is-selected {
    border-bottom: 0px solid #26a2ff; 
    color: #7bbd86;
    margin-bottom: -0.15rem;
}
#secHandPub .mint-tab-container {
    height:29rem;
    overflow:scroll;
    position: relative;
}
#secHandPub .sell{
    height:15.75rem;
    width:100%;
    padding-top:2.5rem;
    font-size:0.8rem;
    background-size:100% 100%;
    background-image:url(../../assets/tabber/shCard.png)
}
#secHandPub .sell section{
    margin:auto;
    height:2.8rem;
    width:85%;
}
#secHandPub .sell img{
    height:1.8rem;
    width:1.8rem;
    margin-right:0.75rem;
}
#secHandPub .sellNext{
    position:fixed;
    bottom:1.5rem;
    left:2rem;
    height:2.5rem;
    width:80%;
    margin:auto;
    text-align:center;
    line-height:2.5rem;
    background:#29a193;
    color:#fff;
    border-radius:13px;
}
#secHandPub .buy{
    height:22.65rem;
    width:100%;
    padding-top:2.5rem;
    font-size:0.6rem;
    background-size:100% 100%;
    background-image:url(../../assets/tabber/shCardB.png)
}
#secHandPub .buy section{
    margin:auto;
    height:2.8rem;
    width:85%;
}
#secHandPub .buy img{
    height:1.8rem;
    width:1.8rem;
    margin-right:0.75rem;
}
#secHandPub .buyNext{
    position:fixed;
    bottom:1.5rem;
    left:2rem;
    height:2.5rem;
    width:80%;
    margin:auto;
    text-align:center;
    line-height:2.5rem;
    background:#29a193;
    color:#fff;
    border-radius:13px;
}
#secHandPub input{
    background:#f8f8f8;
    height:2rem;
    font-size:0.8rem;
    width:80%!important;
    padding:0.15rem 0.4rem;
    border-radius:4px;
}
#secHandPub textarea{
    background:#f8f8f8;
    height:6rem;
    width:80%;
    font-size:0.8rem;
    padding:0.25rem 0.4rem;
    border-radius:4px;
}
#secHandPub .back{
    position:fixed;
    height:0.75rem;
    width:0.4rem;
    top:1.25rem;
    left:1.25rem;
}

#secHandPub #imgList{
            display: flex;
            margin-top:4rem;
            margin-left:2.5rem;
        }

        #secHandPub #imgList .item {
            width: 6rem;
            height: 6rem;
            background:#f8f8f8;
            position: relative;
            margin-left: 3rem;
            overflow: hidden;
        }

        #secHandPub #imgList .item img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        #secHandPub #imgList .item input {
            font-size: 2.5rem;
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0;
        }

</style>